<template>
<div class="container">
    <div class="G_header"></div>
    <div class="G_main" >
        <div class="layout-1">
            <div class="inf">
                <table>
                    <tr><td style="height:20px"></td></tr>
                    <tr>
                        <td >姓名：{{name}}</td>
                    </tr>

                    <tr>
                        <td>性别：{{sex}}</td>
                        <td>出生年月：{{birth}}</td>
                    </tr>

                    <tr>
                        <td>学历：{{education}}</td>
                        <td>工作经验：{{work}}</td>    
                    </tr>

                    <tr>
                        <td>联系电话：{{telephone}}</td>
                        <td>联系邮箱：{{mailbox}}</td>
                    </tr>

                    <tr>
                        <td>现住地址:{{L_address}}</td>
                        <td>健康状态：{{healthy}}</td>
                    </tr>

                    <tr>
                        <td>户籍地址：{{H_address}}</td>
                        <td>政治面貌：{{pol_outlook}}</td>
                    </tr>
                </table>
            </div>
            <div class="tree">
                <div class="time">
                    <table>
                        <tr><td>{{time1}}</td></tr>
                        <tr><td>{{time2}}</td></tr>
                        <tr><td>{{time3}}</td></tr>
                        <tr><td>{{time4}}</td></tr>
                    </table>
                </div>
                <div class="things">
                    <table>
                        <tr><td>{{thing1}}</td></tr>
                        <tr><td>{{thing2}}</td></tr>
                        <tr><td>{{thing3}}</td></tr>
                        <tr><td>{{thing4}}</td></tr>
                    </table>
                </div>
            </div>
        </div>
    </div> 
    <div class="G_footer"></div> 
</div>

</template>
<script>
export default {
    name:'GrowthTree',
    data() {
        return {
            name:'张三',
            sex:'男',
            birth:'2020-1-1',
            education:'本科',
            work:'程序员',
            telephone:'18229235311',
            mailbox:'@zhangsan.com',
            L_address:'河南郑州',
            healthy:'健康',
            H_address:'河南郑州',
            pol_outlook:'共青团团',
            time1:'2021年6月14日',
            time2:'2018年6月14日',
            time3:'2015年6月14日',
            time4:'2012年6月14日',
            thing1:'大学毕业',
            thing2:'高中毕业',
            thing3:'初中毕业',
            thing4:'小学毕业',
        }
    },
}
</script>

<style lang="scss">

.container {
    width: 100%;
}
.G_header {
    width: 100%;
    height: 60px;
    // border: 1px solid red; 
}
.G_main  {
    width: 1050px;
    height: 460px;
    text-align: center;
    margin: 0 auto;
}

.G_main  .layout-1{
    width: 810px;
    height: 400px;
    background-color: #F1F1F1;
    text-align: center;
    display: inline-block;
}
.G_main  .layout-1 .inf{
    width: 400px;
    height: 220px;
    background-color:#FFFFFF;
    margin: 80px 0px 0px 55px ;
    
}
.G_main  .layout-1 .inf table{
    margin-left: 20px;
}
.G_main  .layout-1 .inf td {
    height: 30px;
    width: 200px;
    text-align: left;
}
.G_main   .layout-1 .tree{
    height: 80%;
    width: 290px;
    margin: -260px 0px 0px 460px ;
    text-align: center;
    display: inline-block;
    // border: 1px solid red;
}


.G_main   .layout-1 .tree .time{
    height: 100%;
    width: 50%;  
    border-right: 1px solid  #797979; 
    float: left;
}
.G_main   .layout-1 .tree .time td {
    height: 80px;
    width: 200px;
    text-align: left;
}
.G_main  .layout-1 .tree .time table{
    margin-left: 15px;
}
.G_main   .layout-1 .tree .things{
    height: 100%;
    width: 50%; 
    float: left;
}
.G_main   .layout-1 .tree .things td {
    height: 80px;
    width: 200px;
    text-align: left; 
}
.G_main  .layout-1 .tree .things table{
    margin-left: 20px;
}
.G_footer{
    width: 100%;
}
</style>